<template>
  <div class="softwareLibrary-container">
    <el-row class="softwareLibrary-row">
      <el-col :span="14" style="margin-bottom:28px">
        <li @click="tabChange('1025')"><span :class="{'bagPop': tabActive == 1025,'tabli': true}">全部软件</span><el-divider direction="vertical" /></li>

        <li
          v-for="(item,index) in options"
          :key="item.id"
          @click="tabChange(item.id)"
        >
          <span :class="{'bagPop': tabActive == item.id,'tabli': true}">{{ item.name }}</span>
          <el-divider v-if="index+1 < options.length" direction="vertical" />
          <!-- <el-divider v-if="index+1 == options.length && isManage" direction="vertical" /> -->
        </li>
        <!-- <li v-if="isManage">
          <span :class="{'bagPop': tabActive == 55904214559285248,'tabli': true}" @click="dialogTableVisible = true">类型管理</span></li> -->
      </el-col>
      <el-col :span="10" style="text-align: right;">
        <el-button
          type="primary"
          size="mini"
          style="margin-right: 12px;"
          @click="dialogTableVisible = true"
        ><i class="el-icon-setting" />
          &nbsp;类型管理</el-button>
        <!-- <el-select
          v-model="listQuery.departId"
          style="width:130px;padding-right:12px"
          placeholder="请选择部门"
          size="mini"
          clearable
          @change="queryDepartC"
        >
          <el-option
            v-for="item in options10"
            :key="item.id"
            style="display: list-item;"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="listQuery.search"
          style="width:130px;padding-right:12px"
          :placeholder="placeholderName"
          size="mini"
        />
        <el-button size="mini" type="primary" @click="getList">
          搜索
        </el-button> -->
      </el-col>
      <!-- <el-col :span="9" style="margin-bottom:20px">
        <el-col :span="8" style="margin-bottom: 0px; text-align: right;padding-right:10px">
          <el-button
            type="primary"
            size="mini"
            style="height: 28px; font-size: 10px"
            @click="dialogTableVisible = true"
          ><i class="el-icon-setting" />
            &nbsp;类型管理</el-button>
        </el-col>
        <el-col :span="8" style="text-align: right;padding-right:20px">
          <el-select
            v-model="listQuery.departId"
            placeholder="请选择部门"
            size="mini"
            clearable
            @change="queryDepartC"
          >
            <el-option
              v-for="item in options10"
              :key="item.id"
              style="display: list-item;"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input
            v-model="listQuery.search"
            placeholder="请输入内容"
            size="mini"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" />
          </el-input>
        </el-col>
      </el-col> -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button
          type="primary"
          size="mini"
          style="height: 28px;font-size: 10px"
          @click="openSoftware('up')"
        >新增软件</el-button>
        <!--        <el-button-->
        <!--          v-else-->
        <!--          type="primary"-->
        <!--          size="mini"-->
        <!--          @click="dialogTableVisible = true"-->
        <!--          style="height: 28px; font-size: 10px"-->
        <!--        ><svg-icon icon-class="ico_user_add" />-->
        <!--          &nbsp;类型管理</el-button>-->
      </el-col>
    </el-row>
    <el-dialog
      title="类型管理"
      :visible.sync="addTypedialogV"
      width="25%"
      center
    >
      <el-form
        label-width="100px"
        size="mini"
      >
        <el-form-item label="类型名称:">
          <el-input v-model="typeName" :maxlength="6" :minlength="2" />
        </el-form-item>
        <!--        <el-form-item label="说明:">-->
        <!--          <el-input v-model="typeDec" />-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="addNewType">确 定</el-button>
        <el-button size="mini" @click="addTypedialogV = false">取 消</el-button>
      </span></el-dialog>
    <el-dialog
      title="秘钥管理"
      :visible.sync="addTypedialogV1"
      width="25%"
      center
    >
      <el-form
        label-width="100px"
        size="mini"
      >
        <el-form-item label="秘钥:">
          <el-input v-model="value1" />
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="value2" type="number" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="softSecretDel(null,'add')">确 定</el-button>
        <el-button size="mini" @click="addTypedialogV1 = false">取 消</el-button>
      </span></el-dialog>
    <el-dialog :title="'软件秘钥管理--' + softTitle" :visible.sync="dialogTableVisibleS" width="65%">
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 20px"
        @click="softSecretDel(null,'open')"
      >新增秘钥</el-button>
      <el-table
        v-loading="listLoading1"
        :data="secretList"
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="秘钥"
          width=""
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.secretKey }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 0 ?'空闲':scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.departmentName || '无' }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="说明">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ scope.row.descr }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              size="mini"
              @click="softSecretDel(scope.row,'edit')"
            >编辑</el-button> -->
            <el-button
              v-if="scope.row.type == 0"
              type="danger"
              size="mini"
              @click="softSecretDel(scope.row,'del')"
            >删除</el-button>
            <el-button
              v-if="scope.row.type == 1"
              type="warning"
              size="mini"
              @click="softSecretDel(scope.row,'cehui')"
            >撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        style="text-align: center;"
        :current-page="pageIn"
        :page-sizes="[10,20]"
        :page-size="limitIn"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalIn"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </el-dialog>
    <el-dialog title="软件类型管理" :visible.sync="dialogTableVisible" width="500px">
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 20px"
        @click="addNewType('add')"
      >新增类型</el-button>
      <el-table
        :data="options"
        style="width: 100%;
         max-height: 360px;
         overflow-y: scroll;"
      >
        <el-table-column
          label="类型名称"
          width=""
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="创建时间">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ scope.row.createTime }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="修改时间">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ scope.row.updateTime }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="说明">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ scope.row.descr }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          label="操作"
          width=""
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addNewType('edit',scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="addNewType('del',scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div class="softwareLibrary-text">
      <el-table
        v-loading="listLoading"
        element-loading-text="正在加载中..."
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="list"
        style="width: 100%"
        @row-dblclick="rowDbclick"
      >
        <el-table-column label="软件名称" width="300px">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="24">
                <img
                  v-if="scope.row.logo != ''"
                  style="width: 48px; height: 48px;margin-right: 10px; float:left"
                  :src="scope.row.logo"
                  fit="fit"
                >
                <img
                  v-if="scope.row.logo == ''"
                  style="width: 48px; height: 48px;margin-right: 10px; float:left"
                  src="../../assets/images/mricon.png"
                  fit="fit"
                >
                <div class="desc strinExceeds" :title="scope.row.softVersion">{{ scope.row.softVersion }}</div>
                <div class="desc strinExceeds">{{ scope.row.name }}</div>
                <!-- <div class="desc strinExceeds" :title="scope.row.descr">{{ scope.row.descr }}</div> -->
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- <el-table-column label="秘钥" width="" align="center">
          <template slot-scope="scope">
            <span>共{{ scope.row.totalNum }}个,已使用{{ scope.row.useNum }}个</span>
          </template>
        </el-table-column> -->
        <el-table-column width="200" label="软件编号">
          <template slot-scope="scope">
            <span>{{ scope.row.softNumber || 'DX-RJ-0000x' }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="软件大小">
          <template slot-scope="scope">
            <span>{{ scope.row.sizeWithUnit }}</span>
            <!-- <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>详细大小: {{ scope.row.size }}字节</p>
              <div slot="reference" class="name-wrapper">
                <span>{{ scope.row.sizeWithUnit }}</span>
              </div>
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="详情" width="80">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleDetails(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="来源" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? '库内' : '库外' }}
          </template>
        </el-table-column>
        <el-table-column label="所在网络" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.networkType == 1 ? '内网' : '外网' }}
          </template>
        </el-table-column>
        <el-table-column label="技术员" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.technologyName }}
          </template>
        </el-table-column>
        <el-table-column label="技术员电话" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.technologyPhone }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          width="320"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="!isMyDept(scope.row.departId)&&!isAdmin1"
              style="width: 80px"
              type="primary"
              size="mini"
              @click="openSoftware(scope.row)"
            >编辑</el-button>
            <el-button
              :disabled="!isMyDept(scope.row.departId)&&!isAdmin1"
              style="width: 80px"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
            <el-button
              :disabled="!isMyDept(scope.row.departId)&&!isAdmin1"
              style="width: 80px"
              v-if="scope.row.secretKeyType == 1"
              size="mini"
              @click="openSecretkey(scope.row)"
            >秘钥管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <!-- 删除软件 -->
    <el-dialog
      title="删除软件"
      :visible.sync="delSoftwaredialogV"
      width="25%"
      :before-close="handleClose"
      center
    >
      <div class="text-algin-center">
        <el-avatar :size="60" src="../../assets/icons_slices/img_opo_tip.png">
          <img src="../../assets/icons_slices/img_opo_tip.png">
        </el-avatar>
        <h3>确定删除{{ softCache.name }}软件吗？</h3>
        <span>删除后不可恢复</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="handleDelete('comfirmDelSoftware')">删除</el-button>
        <el-button size="mini" @click="delSoftwaredialogV = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { softList, softAdd, softDel, softPut, softTypeList, softTypeAdd, softTypePut, softTypeDel,
  softSecretDel, softSecretPage, softSecretAdd, softSecretPut, softSecretDel1, softSecretUndoPut } from '@/api/softManage'
import Pagination from '@/components/Pagination'
import {
  departmentList
} from '@/api/department'
import { mapGetters } from 'vuex'
import { getCookie} from '@/utils/cookie'

export default {
  name: 'Dashboard',
  components: {
    Pagination
  },
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ]),
    isManage() {
      return (this.$route.query.user && this.$route.query.user.roleType === 1) ||
      (this.userInfo && this.userInfo.roleType === 1 && this.userInfo.roleType !== undefined)
    }
  },
  created() {
    if (JSON.parse(getCookie('userInfo')).roleType === 1024) {
      this.isAdmin1 = true
    } else {
      this.isAdmin1 = false
    }
    this.getTypeList()
    this.getDepartmentList()
    this.fetchData()
  },
  data() {
    return {
      isAdmin1: false,
      totalIn: 0,
      pageIn: 1,
      limitIn: 10,
      secretList: null,
      delSoftwaredialogV: false,
      dialogTableVisibleS: false,
      softCache: {},
      typeCache: {},
      typeDec: '',
      typeName: '',
      typeName1: '',
      addTypedialogV: false,
      addTypedialogV1: false,
      dialogTableVisible: false,
      listLoading: false,
      listLoading1: false,
      addTypeName: '',
      visible: false,
      options: [],
      total: 10,
      listQuery: {
        departId: '',
        page: 1,
        limit: 10,
        typeId: '',
        search: '',
        menuFrom: 0
      },
      list: null,
      tabActive: '1025',
      tableData: [{
        isDownload: false,
        details: '软件说明',
        size: '***M',
        name: '天霸1号',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        isDownload: true,
        details: '软件说明',
        size: '***M',
        name: '天霸2号',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      activeName: 'allSoftware',
      softSecretId: '',
      secretCache: {
        secretKey: '',
        totalNum: 1
      },
      value1: '',
      value2: 1,
      softTitle: '',
      placeholderName: '请输入软件名称'
    }
  },
  methods: {
    isMyDept(deptId) {
      const user = JSON.parse(getCookie('userInfo'))
      console.log(user.departmentId === '67515117203329024')
      if (user.departmentId === '67515117203329024') {
        // 总调度中心可管理所有
        return true
      }
      return user.departmentId === deptId
    },
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options10 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options10.push(item)
            }
          })
        }
      })
    },
    queryDepartC(val) {
      if (val) {
        this.placeholderName = '全部软件'
      } else {
        this.placeholderName = '全部软件'
      }
      // this.getList()
    },
    handleSizeChange(val) {
      this.limitIn = val
      this.softSecretPage()
    },
    handleCurrentChange(val) {
      this.pageIn = val
      this.softSecretPage()
    },
    softSecretPage(params) {
      this.listLoading1 = true
      softSecretPage({
        id: params || this.softSecretId,
        limit: this.limitIn,
        page: this.pageIn
      }).then(res => {
        if (res.code === 200) {
          this.totalIn = res.totalCount
          this.secretList = res.data.data
          this.listLoading1 = false
        }
      }).catch(() => {
        this.totalIn = 0
        this.listLoading1 = false
        this.secretList = null
      })
    },
    rowDbclick(val, val1) {
      this.handleDetails(val, 'detail')
    },
    softSecretDel(params, type) {
      if (type == 'add') {
        if (this.secretCache.id) {
          softSecretPut({
            id: this.secretCache.id,
            secretKey: this.value1,
            totalNum: this.value2,
            softId: this.softSecretId,
            remark: ''
          }).then(res => {
            if (res.code === 200) {
              this.addTypedialogV1 = false
              this.softSecretPage()
              this.$message.success('编辑成功')
            }
          })
        } else {
          softSecretAdd({
            secretKey: this.value1,
            totalNum: this.value2,
            softId: this.softSecretId,
            remark: ''
          }).then(res => {
            if (res.code === 200) {
              this.addTypedialogV1 = false
              this.softSecretPage()
              this.$message.success('新增成功')
            }
          })
        }
      } else if (type == 'open') {
        this.value1 = ''
        this.value2 = ''
        this.softCache.secretKey = ''
        this.softCache.totalNum = ''
        this.addTypedialogV1 = true
      } else if (type == 'edit') {
        this.secretCache = params
        this.value1 = params.secretkey
        this.addTypedialogV1 = true
      } else if (type == 'cehui') {
        this.$confirm('确定撤回吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          softSecretUndoPut({
            id: params.id
          }).then(res => {
            if (res.code === 200) {
              this.softSecretPage(params.softId)
              this.$message.success('撤回成功')
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          softSecretDel1({
            ids: params.id
          }).then(res => {
            if (res.code === 200) {
              this.softSecretId = params.softId
              this.softSecretPage(params.softId)
              this.$message.success('删除成功')
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      }
    },
    openSoftware(params) {
      this.$router.push({ path: '/softManage/softwareManageEdit', query: {
        software: params
        // typeId: this.listQuery.typeId
      }
      })
    },
    openSecretkey(params) {
      this.softTitle = params.softVersion
      this.dialogTableVisibleS = true
      this.softSecretId = params.id
      this.softSecretPage(params.id)
      // this.$router.push({ path: '/softManage/secretkeyManageEdit', query: {
      //   secretkey: params
      // }
      // })
    },
    openSecretkeyDetail(params) {
      // this.dialogTableVisibleS = true
      // this.getTypeList()
      this.$router.push({ path: '/softManage/secretkeyManageEdit', query: {
        secretkey: params
      }
      })
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      if (index === 'comfirmDelSoftware') {
        softDel({ ids: this.softCache.id }).then(res => {
          if (res.code === 200) {
            this.softCache = {}
            this.getList()
            this.delSoftwaredialogV = false
          }
        })
      } else {
        this.softCache = row
        this.delSoftwaredialogV = true
      }
      console.log(index, row)
    },
    handleClose() {
    },
    addNewType(params, params1) {
      if (params === 'add') {
        this.typeCache.id = null
        this.typeName = ''
        this.addTypedialogV = true
      } else if (params === 'del') {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          softTypeDel({
            ids: params1.id
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.getTypeList()
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else if (params === 'edit') {
        this.typeCache = params1
        this.typeName = params1.name
        this.typeDec = params1.remark
        this.addTypedialogV = true
      } else {
        if (this.typeName.length > 2) {
          if (this.typeCache.id) {
            softTypePut({
              id: this.typeCache.id,
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          } else {
            softTypeAdd({
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          }
        } else {
          this.$message.warning('请输入2-4个字符的软件类型!')
        }
      }
    },
    getTypeList() {
      softTypeList({
        limit: 20,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options.push(item)
            }
          })
        }
      })
    },
    copySpecialTopicUrl(row) {
      var oInput = document.createElement('input') // 创建一个隐藏input（重要！）
      oInput.value = row.downloadUrl // 赋值
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$message.success('复制成功')
    },
    getList() {
      this.listLoading = true
      softList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    fetchData() {
      this.getList()
    },
    tabChange(params) {
      this.listQuery.typeId = params
      if (params !== '55904214559285248') {
        this.getList()
        this.tabActive = params
      } else {
        // this.activeName = '1025'
      }
    },
    copyUrl(params) {
    },
    handleDetails(params) {
      this.$router.push({ path: '/dashboard/softwareLibraryDetails',
        query: {
          software: params,
          type: 'softmanage'
        }})
    },
    handleClick(tab, event) {
    }
  }

}
</script>

<style scoped>
  /deep/.el-table__body-wrapper {
    max-height: calc(100vh - 360px);
    overflow-y: scroll;
  }
</style>
<style lang="scss" scoped>
.text-algin-center {
  text-align: center;
}
li {
  display: inline;
  cursor: pointer;
}
.tabli{
  font-size: 8px;
  padding: 5px;
  text-align: center;
  height: 42px;
  width: 92px;
  background-size: cover;
  // background-image: url('../../assets/icons_slices/img_pop.png');
}
.bagPop{
  border-radius: 3px;
  color: aliceblue;
  background-color: rgb(64, 158, 255);
  // background-image: url('../../assets/icons_slices/img_pop.png');
}
.softwareLibrary-row {
  // margin-bottom: 10px;
}
.softwareLibrary {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
</style>
